{% extends 'base_templates/_page_layout.html' %}
{% load generaladmin_tags %}
{% load web_tags %}

{% block css %}
        <!-- DataTables -->
        <link href="/static/plugins/minton/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
        <link href="/static/plugins/minton/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

        <!-- Responsive datatable examples -->
        <link href="/static/plugins/minton/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <style>
    </style>
{% endblock %}

{% block title %}

    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h1 class="page-title">角色管理</h1>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="/system/role/list">角色管理</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block conent %}

<div id="AddRole" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">创建新组</h4>
            </div>
            <div class="modal-body">
                <form method="post">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="field-3" class="control-label">
                                    Name
                                    <span class="text-danger">*</span>
                                </label>
                                {{ obj.name }}
                            </div>
                            <span style="color: red">{{ obj.errors.name }}</span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info waves-effect waves-light">Save changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card-box">
            <h4 class="m-t-0 header-title">角色管理</h4>
            <p class="text-muted m-b-30 font-13">
                请选择需要操作的 <code>角色</code>, 进行 <code>搜索</code> 或者 <code>查看</code> 等操作.
            </p>
            
                <div class="form-row">
                    <div class="form-group col-md-6">
                        {# <form class="form-inline"> #}
                            
                            {# <div class="form-group mx-sm-3"> #}
                                {# <input id="demo-foo-search" class="form-control" type="text" placeholder="{% for s in admin_class.search_fields %}{{ s }},{% endfor %}" name="_q" value="{{ admin_class.search_key }}" autocomplete="on"> #}
                            {# </div> #}
                            {# <button type="submit" class="btn btn-warning"> <i class="fa fa-rocket m-r-5"></i> <span>Search</span> </button> #}
                        {# </form> #}
                        
                    </div>
                    <div class="form-group col-md-6">
                        <div class="form-group mx-sm-3 text-right">
                            <button id="btnDeleteRole" class="btn btn-danger"><i class="fa fa-times"></i> <span>Delete Role</span></button>
                            <button id="btnAddRole" class="btn btn-primary" data-toggle="modal" data-target="#AddRole"><i class="fa fa-plus m-r-5"></i> <span>Add Role</span></button>
                        </div>
                    </div>
                </div>

            
            <table id="role-tables" class="table table-bordered">
                <thead>
                <tr>
                    <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">
                        <input type="checkbox" onclick="SelectAllObjs(this)">
                    </th>
                    <th>RoleName</th>
                    <th>UserCount</th>

                </tr>
                </thead>


                <tbody>
                    {% SetGroupUserCount GroupCountList %}
                
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
        <script src="/static/plugins/minton/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="/static/plugins/minton/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script>

    $(function(){
        bindDeleteRole();
        if(error_status){
            if(error_status == "0"){
                $.Notification.autoHideNotify('info', 'top right', '注册成功', '已经成功添加新角色!')
                // window.location.href = "/system/user/list";
            }else if(error_status == "1") {
                // sweetAlert("错误的注册", "请重新注册，填写正确的信息!", "error");
                $.Notification.autoHideNotify('error', 'top right', '错误的注册', '请重新注册，填写正确的信息!')
                $("#btnAddRole").click()
            }
        }
    })

    var error_status = "{{ error_status }}"

    function SelectAllObjs(ele) {

        if ($(ele).prop('checked')){
            $('input[row-select]').prop('checked',true)

        }else {
            $('input[row-select]').prop('checked',false)
        }

    }


    function ActionCheck(ele){
        var selected_action = $("select[name='action']").val();
        var selected_objs = $("input[row-select]").filter(":checked");
        console.log($("select[name='action']").val())
        if (!selected_action){
            alert("no action selected!");
            return false
        }
        if (selected_objs.length == 0 ){
            alert("no object selected!");
            return false
        }else {
            //生成一个标签,放到form里

            var selected_ids = [];
            $.each(selected_objs,function () {
                console.log($(this) );
                selected_ids.push($(this).val())
            });
            console.log(selected_ids);
            var input_ele = "<input type='hidden' name='selected_ids' value=" + JSON.stringify(selected_ids) + ">";

            $(ele).append(input_ele);
        }
        //return false



    }

    function bindDeleteRole(){

        $("#btnDeleteRole").click(function(){
            var postData = {};
            var DELETEDATA = "RoleList"
            postData[DELETEDATA] = [];
            $("#role-tables").find('input[type="checkbox"]').each(function(){
                if ($(this).prop('checked') && $(this).attr("row-select")){
                    postData[DELETEDATA].push($(this).val())
                }
            })
            
            
            if (!jQuery.isEmptyObject(postData[DELETEDATA])){
                swal({
                    title: '你确定要删除？',
                    text: "点击确定后会进行删除！",
                    type: 'question', // warning
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    confirmButtonClass: 'btn btn-success mt-2 delete-resume-source',
                    cancelButtonClass: 'btn btn-danger ml-2 mt-2',
                    buttonsStyling: false
                }).then(function () {
                    
                }, function (dismiss) {
                    if (dismiss === 'cancel') {
                        swal({
                            title: '已取消',
                            text: "成功取消删除操作!",
                            type: 'success',
                            confirmButtonClass: 'btn btn-confirm mt-2'
                        })
                    }
                });
                $('.delete-resume-source').click(function () {
                    postData[DELETEDATA] = JSON.stringify(postData[DELETEDATA])
                    DeleteData(postData);
                })
            }else {
                $.Notification.autoHideNotify('error', 'top right', '无效的删除','无效的操作，没有需要删除的数据，请查看后再次删除!')
            }
            
        })
    }
    function DeleteData(postData){
        $.ajax({
            url: '/system/role/delete',
            data: postData,
            type: 'POST',
            dataType: "JSON",
            success: function(arg){
                if (arg.status_code != "200"){
                    swal({
                        title: '错误',
                        text: "数据删除失败!",
                        type: 'error',
                        confirmButtonClass: 'btn btn-confirm mt-2'
                    })
                }else{
                    swal({
                        title: '已删除',
                        text: "数据删除成功!",
                        type: 'success',
                        confirmButtonClass: 'btn btn-confirm mt-2'
                    }).then(function () {
                        window.location.reload();
                    });
                    
                }
            }
        })
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {

        // Default Datatable
        $('#role-tables').DataTable({
            lengthChange: false,
        });

        //Buttons examples
        var table = $('#datatable-buttons').DataTable({
            lengthChange: false,
            buttons: ['copy', 'excel', 'pdf']
        });

        // Key Tables

        $('#key-table').DataTable({
            keys: true
        });

        // Responsive Datatable
        $('#responsive-datatable').DataTable();

        // Multi Selection Datatable
        $('#selection-datatable').DataTable({
            select: {
                style: 'multi'
            }
        });

        table.buttons().container()
                .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
    } );

</script>
{% endblock %}